<template>
  <div>
    <h2 style="background-color:bisque;width: 150px;">承运合同审批</h2><br>
    合同标题：<el-input v-model="form.contracTitle" style="width: 250px;height: 40px;" placeholder="请输入合同标题" clearable />
    外协单位：<el-input v-model="form.carrierUnit" style="width: 250px;height: 40px;" placeholder="请输入外协单位" clearable />
    外协负责人：<el-input v-model="form.carrierName" style="width: 250px;height: 40px;" placeholder="请输入外协负责人" clearable />
    <br> <br>&nbsp;&nbsp;
    经办人：<el-input v-model="form.handlingName" style="width: 250px;height: 40px;" placeholder="请输入经办人" clearable />
    签订时间：<el-date-picker v-model="form.signedTime" style="width: 250px;height: 40px;" placeholder="请输入签订时间" type="date"
      value-format="YYYY-MM-DD" clearable />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button type="primary" @click="GetAll">查询</el-button>
    <el-button @click="Reset">重置</el-button>
    <br><br>
    <!-- 审批状态 -->
    <el-radio-group v-model="form.approval" size="large" @Change="GetAll" style="width: 500px;background-color:beige ;">
      <el-radio-button label="全部" value='' style="width: 150px;" />
      <el-radio-button label="待审批" value='1' style="width: 150px;" />
      <el-radio-button label="已审批" value='2' />
    </el-radio-group><br>
    <el-scrollbar>
      <div align="center">
        <el-table :data="tableData" border style="width: 1800px">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="contractNumber" label="合同编号" align="center" width="150" />
          <el-table-column prop="contracTitle" label="合同标题" align="center" width="120" />
          <el-table-column prop="carrierUnit" label="外协单位" align="center" width="180" />
          <el-table-column prop="carrierName" label="外协负责人" align="center" width="120" />
          <el-table-column label="线路" align="center" width="120">
            <template v-slot="scope">
              <span>{{ scope.row.line }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="freight" label="吨运价" align="center" width="100" />
          <el-table-column prop="tonnage" label="包车条件吨位" align="center" width="120" />
          <el-table-column prop="charterAmount" label="包车金额" align="center" width="100" />
          <el-table-column prop="signedTime" label="签订日期" align="center" width="120">
            <template v-slot="scope">
              <span>{{ (scope.row.signedTime).substring(0, 10) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="handlingName" label="经办人" align="center" width="80" />
          <el-table-column prop="createDate" label="创建时间" align="center" width="150">
            <template v-slot="scope">
              <span>
                {{ (scope.row.createDate).substring(0, 10) + ' ' + (scope.row.createDate).substring(11, 16) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="80">
            <template v-slot="scope">
              <span v-if="scope.row.contractStatus == 1">待审批</span>
              <span v-if="scope.row.contractStatus == 2">已通过</span>
              <span v-if="scope.row.contractStatus == 3">已拒绝</span>
            </template>
          </el-table-column>
          <el-table-column prop="statusPerson" label="审批人" align="center" width="80" />
          <el-table-column label="操作" fixed="right" min-width="185" align="center">
            <template v-slot="scope">
              <el-button type="primary" text style="width: 15px;" @click="Check(scope.row)">查看</el-button>
              <el-button type="primary" text style="width: 15px;" :disabled="scope.row.contractStatus > 1"
                @click="Through(scope.row.contractId, 2)">通过</el-button>
              <el-button type="primary" text style="width: 15px;" :disabled="scope.row.contractStatus > 1"
                @click="Through(scope.row.contractId, 3)">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div><br>
      <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[4, 8, 15]"
        prev-text="上一页" next-text="下一页" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="form.pageRoot" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
const form = reactive({
  pageIndex: 1,
  pageSize: 4,
  classify: 3,
  pageRoot: 0,
  pageCount: 0,
  contracTitle: '',
  carrierUnit: '',
  carrierName: '',
  handlingName: '',
  signedTime: '',
  approval: ''
})
onMounted(() => {
  GetAll()
})
const tableData = ref([])
//承运合同审批列表
const GetAll = () => {
  console.log(form.approval);
  axios.get('ContractRead/api/ReadContract/ApprovalGetAll', {
    params: {
      pageIndex: form.pageIndex,
      pageSize: form.pageSize,
      classify: form.classify,
      contracTitle: form.contracTitle,
      carrierUnit: form.carrierUnit,
      carrierName: form.carrierName,
      handlingName: form.handlingName,
      signedTime: form.signedTime,
      approval: form.approval
    }
  }).then((ret) => {
    console.log(ret.data)
    tableData.value = ret.data.data.plist
    form.pageRoot = ret.data.data.pageRoot
    form.pageCount = ret.data.data.pageCount
  })
}
//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val
  GetAll()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val
  GetAll()
}
//通过/拒绝
const Through=(contractId:number,contractStatus:any)=>{
  axios.get('Contract/api/Contract/UpdateState', {
    params: {
      contractId: contractId,
      contractStatus: contractStatus
    }
  }).then((ret) => {
    console.log(ret.data)
    if (ret.data.data == 1) {
      ElMessage.success('审批成功')
      GetAll()
    } else {
      ElMessage.error('审批失败')
    }
  })
  if (contractStatus == 2) {
    GetContracted(contractId)
  }
}
//查看
const Check = (row: any) => {
  if (row.contractStatus == 1) {
    router.push({
      path: '/OwnerView',
      query: {
        contractId: row.contractId,
        classify: row.classify
      }
    })
  }
  if (row.contractStatus > 1) {
    router.push({
      path: '/OwnerPassView',
      query: {
        contractId: row.contractId,
        contractStatus: row.contractStatus,
        classify: row.classify
      }
    })
  }
}
//重置
const Reset = () => {
  form.contracTitle = '',
    form.carrierUnit = '',
    form.carrierName = '',
    form.handlingName = '',
    form.signedTime = '',
    form.approval = ''
  GetAll()
}

//跟踪记录（审批合同）
const TrackRecord = reactive({
  "contractNumber": "",
  "header": "审批合同",
  "carrier": "",
  "phone": "13403931159",
})
//货主合同查看详情
const GetContractedinfo:any = ref({})
const GetContracted = (Id: number) => {
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId: Id
    }
  }).then((ret) => {
    GetContractedinfo.value = ret.data.data
    AddApprovalTrackRecord()
  })
}
//添加跟踪记录（审批合同）
const AddApprovalTrackRecord = () => {
  TrackRecord.contractNumber = GetContractedinfo.value.contractNumber
  TrackRecord.carrier = GetContractedinfo.value.ownerUnit
  axios.post("Contract/api/TrackRecord/AddApprovalTrackRecord", TrackRecord).then(res => {
    console.log(res.data)
  }).catch(err => {

  })
}



</script>

<style scoped></style>